<template>
  <div class="approval-container">
    <!-- 搜索栏 -->
    <div class="search-bar">
      <el-form :inline="true" :model="searchForm" class="search-form">
        <el-form-item label="申请人">
          <el-input
            v-model="searchForm.applicant"
            placeholder="请输入申请人"
            clearable
            @clear="handleSearch"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 数据表格 -->
    <el-table
      v-loading="loading"
      :data="tableData"
      border
      style="width: 100%"
    >
      <el-table-column
        prop="processInstanceId"
        label="流程实例ID"
        min-width="120"
      ></el-table-column>
      <el-table-column
        prop="processDefinitionName"
        label="流程类型"
        min-width="120"
      ></el-table-column>
      <el-table-column
        prop="startUserId"
        label="申请人"
        min-width="120"
      ></el-table-column>
      <el-table-column
        prop="startTime"
        label="提交时间"
        min-width="160"
      ></el-table-column>
      <el-table-column
        prop="processStatus"
        label="流程状态"
        width="100"
      >
        <template slot-scope="scope">
          <el-tag :type="getStatusType(scope.row.processStatus)">
            {{ scope.row.processStatus }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        width="100"
        fixed="right"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            @click="handleDetail(scope.row)"
          >
            <i class="el-icon-document"></i>
            查看
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'ApprovalCompleted',
  data() {
    return {
      loading: false,
      searchForm: {
        applicant: ''
      },
      tableData: []
    }
  },
  created() {
    this.fetchApprovalData()
  },
  methods: {
    // 获取审批数据
    async fetchApprovalData() {
      try {
        this.loading = true
        const userInfo = JSON.parse(window.sessionStorage.getItem('userInfo'))
        let params = {}
        
        // 根据用户权限决定是否添加name参数
        if (userInfo && userInfo.authorities && userInfo.authorities.length > 0) {
          const authority = userInfo.authorities[0]
          if (authority.authority !== '0') {
            params.name = userInfo.username
          }
        }
        
        const response = await this.$axios.get('/workflow/common/approvalDetailList', { params })
        
        if (response && response.result === 200) {
          this.tableData = response.data
        } else {
          this.$message.error(response.message || '获取审批数据失败')
        }
      } catch (error) {
        console.error('获取审批数据出错：', error)
        this.$message.error('获取审批数据失败')
      } finally {
        this.loading = false
      }
    },

    // 获取状态标签类型
    getStatusType(status) {
      switch (status) {
        case '运行中': return 'warning'
        case '已完成': return 'success'
        case '已终止': return 'danger'
        case '被驳回': return 'danger'
        default: return 'info'
      }
    },

    // 搜索
    handleSearch() {
      this.fetchApprovalData()
    },

    // 重置搜索
    resetSearch() {
      this.searchForm = {
        applicant: ''
      }
      this.handleSearch()
    },

    // 查看详情
    handleDetail(row) {
      // 根据流程类型处理不同的查看详情页面
      if (row.processDefinitionId.includes('recruit')) {
        // 招聘流程
        this.$router.push({
          path: '/recruitment/process-detail',
          query: {
            insId: row.processInstanceId,
          }
        })
      } else if (row.processDefinitionId.includes('entry')) {
        // 入职流程
        this.$router.push({
          path: '/entry/process-detail',
          query: {
            insId: row.processInstanceId,
            processDefinitionId: row.processDefinitionId,
            staffDetailId: row.variables ? row.variables.staffDetailVO : null
          }
        })
      } else if (row.processDefinitionId.includes('assess')) {
        // 绩效评估流程
        this.$router.push({
          path: '/performance/process-detail',
          query: {
            insId: row.processInstanceId,
            processDefinitionId: row.processDefinitionId
          }
        })
      } else if (row.processDefinitionId.includes('interview')) {
        // 面试
        this.$router.push({
          path: '/recruitment/interview-process',
          query: {
            insId: row.processInstanceId,
            processDefinitionId: row.processDefinitionId,
            jobPostingVO: row.variables ? row.variables.jobPostingVO: null,
          }
        })
      } else if (row.processDefinitionId.includes('leave')) {
        // 请假
        this.$router.push({
          path: '/employee/leave-detail',
          query: {
            insId: row.processInstanceId,
            processDefinitionId: row.processDefinitionId,
            leaveApplicationVO: row.variables ? row.variables.leaveApplicationVO: null,
            pageType: 'view'
          }
        })
      } else if (row.processDefinitionId.includes('dimission')) {
        // 离职
        this.$router.push({
          path: '/employee/resignation-detail',
          query: {
            insId: row.processInstanceId,
            processDefinitionId: row.processDefinitionId,
            applicationVO: row.variables ? row.variables.applicationVO: null,
            pageType: 'view'
          }
        })
      } else if (row.processDefinitionId.includes('conversion')) {
        // 转正
        this.$router.push({
          path: '/employee/probation-detail',
          query: {
            insId: row.processInstanceId,
            processDefinitionId: row.processDefinitionId,
            applicationVO: row.variables ? row.variables.applicationVO: null,
            pageType: 'view'
          }
        })
      } else {
        // 其他类型流程
        this.$message.info('该流程暂不支持查看详情')
      }
    }
  }
}
</script>

<style scoped>
.approval-container {
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  min-height: calc(100vh - 120px);
}

.search-bar {
  margin-bottom: 30px;
}

.search-form {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.el-form-item {
  margin-bottom: 0;
  margin-right: 20px;
}

/* 表格上边距 */
.el-table {
  margin-top: 20px;
}

/* 表格内容居中 */
.el-table >>> .el-table__cell {
  text-align: center;
}

/* 标签样式 */
.el-tag {
  margin: 0 2px;
}

/* 按钮样式 */
.el-button--text {
  padding: 0 8px;
}
</style> 